<template>
  <div>
    <!--
  属性：
        action :上传的地址，
        list-type :文件列表的类型 picture-card 照片墙
                   可选值：text/picture/picture-card
        limit	  最大允许上传个数	number
        file-list	上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]
        on-preview	点击文件列表中已上传的文件时的钩子 就有预览功能
        on-remove	  文件列表移除文件时的钩子	function(file, fileList)
        http-request	覆盖默认的上传行为，可以自定义上传的实现	function
        on-change	 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用	function(file, fileList)
        before-upload	校验，上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。	function(file)
     -->
    <el-upload
      action=""
      :class="{disabled:fileComputed}"
      list-type="picture-card"
      :file-list="fileList"
      :limit="limit"
      :http-request="handleAdd"
      :on-preview="preview"
      :on-remove="handleRemove"
      :on-change="handleChange"
      :before-upload="beforeUpload"
    >
      <!-- 默认插槽 照片墙中的内容 -->
      <i class="el-icon-plus" />
    </el-upload>
    <!-- 添加进度条：
      1、首先隐藏进度条
      2、当上传时，显示进度条
      3、传成功时，延迟一点，重置进度条数据、并隐藏
    -->
    <!-- <div v-if="showProgress" style="width:200px;">
      <el-progress :percentage="percent" />
    </div> -->
    <!-- 图片预览 -->
    <el-dialog :visible.sync="showDialog" width="600px" top="8vh" title="图片预览">
      <img width="100%" :src="imgUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
import COS from 'cos-js-sdk-v5' // 导入腾讯云的包(sdk)
const cos = new COS({
  SecretId: 'AKIDZxymKGzWwLgrAJLD0qiaRFsWiu5AD7rl', // 身份识别ID
  SecretKey: 'oPvRvMflcGoALME5pT3eCnGgzHViwAHJ' // 身份秘钥
})
export default {
  name: 'ImageUpload',
  props: {
    limit: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      fileList: [
        // { name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' },
        // { name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }
      ],
      showDialog: false, // 控制显示弹层,
      imgUrl: ''
      // percent: 0,
      // showProgress: false
    }
  },
  // 设定一个计算属性 判断是否已经上传完了一张
  computed: {
    fileComputed() {
      return this.fileList.length >= this.limit
    },
    // 计算属性，判断每一张图片都上传完了
    uploadSuccess() {
      return this.fileList.every(item => item.status === 'success')
    }
  },
  methods: {
    // 预览功能
    preview(file) {
      // 这里应该弹出一个层 层里是点击的图片地址
      // file对应 上面的fileList内部的每个对象
      this.imgUrl = file.url
      this.showDialog = true
    },

    // 删除功能
    // file   删除的对象
    // fileList  删除后剩余的列表
    // this.fileList 数据中的文件列表
    handleRemove(file, fileList) {
      // this.fileList = fileList
      this.fileList = this.fileList.filter(item => item.uid !== file.uid) // 从data中移出对应项
    },

    // 添加功能
    handleAdd({ file }) {
      // file 上传的文件对象
      // 防错处理
      if (!file) return
      // 显示进度条
      this.showProgress = true
      // 找到上传的文件对象
      const fileObj = this.fileList.find(item => item.uid === file.uid)
      if (file) {
        // 执行上传操作
        cos.putObject({
          Bucket: 'hrsaas-zhou-1317912123', /* 存储桶 */
          Region: 'ap-shanghai', /* 存储桶所在地域，必须字段 */
          Key: Date.now() + '-' + file.name, /* 文件名 可以使用时间戳，防止同名文件覆盖*/
          StorageClass: 'STANDARD', // 上传模式, 标准模式
          Body: file, // 上传文件对象
          onProgress: (progressData) => {
            console.log(JSON.stringify(progressData))
            // 控制进度条数据(并转整数)
            // this.percent = parseInt(progressData.percent * 100)
            fileObj.status = 'uploading'
            fileObj.percentage = parseInt(progressData.percent * 100)
          }
        }, (err, data) => { // 这里使用箭头函数 ，目的使this的指向Vue实例
          console.log(err || data)
          if (err) return
          // 处理上传成功后的业务
          if (data.statusCode === 200) {
            fileObj.status = 'success'
            fileObj.url = 'http://' + data.Location
            // 成功时隐藏、重置进度条
            // setTimeout(() => {
            //   this.showProgress = false
            //   this.percent = 0
            // }, 500)
          }
        })
      }
    },

    // 监测文件改变
    // file  添加的文件
    // fileList 添加后的文件列表
    handleChange(file, fileList) {
      this.fileList = fileList
    },

    // 上传前的校验
    beforeUpload(file) {
      // 1. 限制文件类型 file.type(上传的文件类型)
      const type = ['image/jpeg', 'image/gif', 'image/bmp', 'image/png']
      if (!type.includes(file.type)) {
        this.$message.error('上传的图片格式, 必须是jpg, gif, bmp, png的格式!')
        return false
      }
      // 2. 限制文件大小 file.size(上传的文件大小)
      const ls1M = file.size / 1024 / 1024 <= 5
      if (!ls1M) {
        this.$message.error('上传头像过大, 超过了5M, 必须5M以内')
        return false
      }
      return true
    }
  }
}
</script>

<style lang="scss" scoped>
.disabled {
  ::v-deep {
    .el-upload--picture-card {
      display: none;
    }
  }
}

</style>
